<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col class="" :value='24' :xs='24' :sm='24'>
				<el-form-item label='' prop='' class="!mb-0">
					<Maps class="pb-[50px]" v-model:center.sync="mapdata.center" v-model:area="mapdata.area"
					:isEdit="true"></Maps>
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">

import Maps from "@/components/mapForm/map.vue"
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
// import { titles, prompt } from './index';
// import type { infoType } from '@/api/operate/project-management/projectManagement/setting';

type FormProps = {
	formInline: any,
	isLoading: boolean
}
const mapdata = reactive({
	center: [],
	area: []
})

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as any),
	isLoading: false
});
watch(()=>props.formInline,()=>{
	mapdata.center = [props.formInline.lng,props.formInline.lat]
	mapdata.area =props.formInline.area
	// console.log("地图第一层弹窗",mapdata.center,mapdata.area);
	
},{
	immediate:true,
	deep:true
})
// console.log("地图",props);

const formRules = reactive(<FormRules>{

});
const ruleFormRef = ref();


function getRef() {
	return ruleFormRef.value;
}

function getMapData(){
	return mapdata
}

defineExpose({ getRef,getMapData });
</script>
<style lang="scss" scoped>
.pickerW {
	width: 100% !important;
}
</style>
